//
//  BuyAiCountHomevView.swift
//  购买次数首页
//
//  Created by 小柠檬🍋 on 2025/9/7.
//

import SwiftUI

struct BuyAiCountHomeView: View {
    @EnvironmentObject var userManager: UserManager
    @State private var selectId = "次数套餐"
    @State var tableItem : [String] = ["次数套餐","无限畅聊"]
    
    var body: some View {
        VStack(spacing:0) {
            if tableItem.count > 1 {
                classsifyView
            }
            pageView.padding(.top, 10)
        }.ignoresSafeArea(edges: .bottom) // 仅忽略底部安全区域,  键盘高度需要获取安全区域
            .navigationTitle("购买回应次数")
            .background(.bg)
            .onAppear {
                if configManager.getConfig().getSwitchConfig().isNoLimit() {
                    tableItem = ["次数套餐","无限畅聊"]
                } else {
                    tableItem = ["次数套餐"]
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    //放在导航栏右边
                    ZStack {
                        Image(.mainIconChat)
                            .resizable()
                            .renderingMode(.template)
                            .scaledToFit()
                            .foregroundColor(themeManager.themeColor)
                            .frame(width: 23, height: 23)
                        Text(userManager.getAiCountStr(isShowCount: false))
                            .font(.system(size: 8))
                            .foregroundStyle(themeManager.themeColor)
                            .padding(.top,32)
                    }.padding(.top, -10)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            pathManager.jump(type: JumpType.BUY_COUNT)
                        }
                }
            }
    }
}

extension BuyAiCountHomeView {
    //标签分类
    var classsifyView: some View {
        ScrollView(.horizontal,showsIndicators: false) {
            VStack(alignment: .leading, spacing: 0){
                //滚动试图（通过HStack监听selectIndex 变化，实现滚动标签）
                ScrollViewReader { value in
                    //横向布局
                    HStack(spacing:0) {
                        ForEach(tableItem, id: \.self) { item in
                            ZStack(alignment: .topTrailing) {
                                //文本
                                Text(item)
                                    .font(.system(size: item == selectId ? 20 : 15))
                                    .fontWeight(item == selectId ? .semibold : .regular)
                                    .foregroundColor(.bgNormalText.opacity(item == selectId ? 1 : 0.3))
                                    .padding(0)
                                if item == "无限畅聊" {
                                    Text("限时")
                                        .font(.system(size: 8))
                                        .foregroundColor(.white)
                                        .padding(.horizontal,2)
                                        .padding(.vertical, 1)
                                        .background(.bgRed)
                                        .cornerRadius(3)
                                        .offset(x: 8, y: 0) // 向右上角微调（x负为左，y正为下，根据需求调整）

                                }
                            }.padding(.horizontal, 7)
                                .padding(.top, 5)
                                .onTapGesture {
                                    withAnimation{
                                        selectId = item
                                    }
                                    //                                     withAnimation(Animation.linear(duration: 2)) { //加个动画，标题滚动到中间才不会生硬
                                    //                                         value.scrollTo(selectIndex,anchor: .center)
                                    //                                     }
                                }
                            
                        }
                    }.padding(.leading,10).padding(.trailing,10) //内部滚动间距
                    //监听试图，让他滚动的时候居中，不支持16
                        .onChange(of: selectId) { newValue in
                            let selectIndex = tableItem.firstIndex(where: { $0 == newValue })
                            withAnimation(Animation.linear(duration: 2)) { //加个动画，标题滚动到中间才不会生硬
                                value.scrollTo(selectIndex,anchor: .center)
                            }
                        }
                }
                //指示器，目前的指示器只能固定大小，应该是需要跟文本一样的宽度才行
                //                     HStack{
                //                         Capsule().fill(Color.red).frame(width: 20,height: 2)
                //                     }.frame(width: 50)
                //                         .offset(x: CGFloat(selectIndex * 50))
                //                         .animation(Animation.linear(duration: 0.2),value: selectIndex)
            }
        }.padding(.trailing,10)
        
    }
}

extension BuyAiCountHomeView{
    private var pageView : some View {
        TabView(selection: $selectId) {
            ForEach(tableItem, id: \.self) { item in
                if item == "无限畅聊" {
                    BuyAiCountView2()
                } else {
                    BuyAiCountView()
                }
            }
            
        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))//使用PageTabViewStyle风格
    }
}

#Preview {
    BuyAiCountHomeView()
}
